demos.PEpanel = Ext.extend( Ext.Panel, {
    btnCount: 0,
    bitWise: 0,
    layoutOnOrientationChange: true,

/*	dockedItems: [{
	    xtype: 'toolbar',
	    dock: 'top',
	    scroll: {
	        direction: 'horizontal',
	        useIndicators: false
	    },
	    defaults: {
            labelAlign: 'left',
            labelWidth: 100,
            width: 156,
            height: 30,
	    },
        items: [
        {   
            text: 'Constitutional',
            ui: 'action'
        }, {
            xtype: 'checkboxfield',
            id: 'wdwn',
            name: 'wdwn',
            label: 'WDWN',
        }, {
            xtype: 'checkboxfield',
            id: 'obese',
            name: 'obese',
            label: 'Obese',
        }, {
            xtype: 'checkboxfield',
            id: 'thin',
            name: 'thin',
            label: 'Thin',
        }, {
            xtype: 'checkboxfield',
            id: 'cachetic',
            name: 'cachetic',
            label: 'Cachetic',
        }]
	}] */
	
	
	
	
	initComponent: function() {
//    	demos.PEpanel2.panelItems = new Array();
    	
//    	var Title = this.items.items[0].text;
    	
    	var PEtitle = this.PEtitle[0];
    	var h = this.PESubItems;
    	
//    	console.debu('h='+h);
    	
    	this.addEvents('pebutton');
        this.enableBubble('pebutton');

        Ext.apply(this, {
        	dock: 'top',
        	scroll: 'vertical',
        	height: h*47,
	    	dockedItems: [{
    	    	xtype:	'panel',
    	    	width: Ext.is.Phone ? 90 : 164,
    	    	dock:	'left',
    	    	height: h*47,
      	        layoutOnOrientationChange: true,
	    	    	dockedItems: [{
		      	    	xtype:	'toolbar',
		      	    	id:		'pe_'+PEtitle.id+'_toolbartitle',
		      	    	dock:	'top',
	        	    	height: h*47,
	      	            
		      	        layoutOnOrientationChange: true,
		      	        defaults: {
		      	            xtype: 'button',
		               	    ui: 'action',
		               	    cls: 'flat-x-button',
		      	            width: Ext.is.Phone ? 80 : 150,
		      	        },
		      	        items:	[{
		      	        	id: 'pe_'+PEtitle.id+'_titlebutton',
		      	        	text: PEtitle.text
		      	        }]
	                }]
	      	    }, {
        	    	xtype:	'panel',
        	    	width: '100%',
        	    	dock:	'left',
        	    	height: '94',
	      	        layoutOnOrientationChange: true,
        	    	dockedItems: [{
		    	    	xtype:	'toolbar',
		      	    	id:		'pe_'+PEtitle.id+'_toolbarmain',
		      	    	dock:	'top',
		      	    	scope:	this,
		  	            cls:	'pe_toolbar_dark',
		      	        layoutOnOrientationChange: true,
		          		scroll: {
		      	            direction: 'horizontal',
		      	            useIndicators: false
		      	        },
		      	        defaults: {
		    	            xtype: 'checkboxfield',
		      	            width: 180,
		      	            height: 30,
		      	            labelAlign: 'left',
		      	            labelWidth: 130,
		      	            cls: 'pe_form_label',
		      	            scope: this,
			            	listeners: {
			                	tap: {
			                		element: 'labelEl',
			                		fn: this.buttonPN,
/*			                		fn: function() {
			                			//console.debug(this.dom.parentElement.id);
			                			
			                			var checkbox = Ext.getCmp(this.dom.parentNode.id);
			                			
			                			//console.debug(this.dom.parentElement.id);
			                			//console.debug('You clicked '+this.id+' and my status is ');
			                			
			                			checkbox.isChecked() ? checkbox.uncheck() : checkbox.check();
			                		} */
			                	},
			                	onclick: {
			                		element: 'el',
			                		fn: this.buttonPN,
			                	},
			                	onuncheck: {
			                		element: 'el',
			                		fn: this.buttonPN,
			                	},
			                }
		      	        },
		            	items: this.PEitems,
		            	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 1) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain2',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	},
			                	check: {
			                		element: 'el',
			                		fn: this.buttonPN,
			                	},
			                	uncheck: {
			                		element: 'el',
			                		fn: this.buttonPN,
			                	}
        	                },
        	  	        },
        	        	items: this.PEitems2,
        	        	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 2) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain3',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	},
			                	tap: {
			                		element: 'el',
			                		fn: this.buttonPN,
			                	},
        	                },
        	  	        },
        	        	items: this.PEitems3,
        	        	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 3) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain4',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	}
        	                },
        	  	        },
        	        	items: this.PEitems4,
        	        	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 4) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain5',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	}
        	                },
        	  	        },
        	        	items: this.PEitems5,
        	        	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 5) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain6',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	}
        	                },
        	  	        },
        	        	items: this.PEitems6,
        	        	//	    	        panelItems: this
        	    	}, {	
        		    	xtype:	'toolbar',
        		    	hidden:	(h > 6) ? false : true,
        	  	    	id:		'pe_'+PEtitle.id+'_toolbarmain7',
        	  	    	dock:	'top',
        	  	    	scope:	this,
        		            cls:	'pe_toolbar_dark',
        	  	        layoutOnOrientationChange: true,
        	      		scroll: {
        	  	            direction: 'horizontal',
        	  	            useIndicators: false
        	  	        },
        	  	        defaults: {
        		            xtype: 'checkboxfield',
        	  	            width: 180,
        	  	            height: 30,
        	  	            labelAlign: 'left',
        	  	            labelWidth: 130,
        	  	            cls: 'pe_form_label',
        	  	            scope: this,
        	            	listeners: {
        	                	tap: {
        	                		element: 'labelEl',
			                		fn: this.buttonPN,
        	                	}
        	                },
        	  	        },
        	        	items: this.PEitems7,
        	        	//	    	        panelItems: this
        	    	}]
	      	}]
        });
        
        demos.PEpanel.superclass.initComponent.apply(this, arguments);
    },
    
    buttonPN: function (btn, evt) {
        //Setting up the button ui...    	
      console.debug(this.id);
      console.debug(this);
    	var panels = Ext.getCmp(this.dom.parentNode.parentNode.parentNode.parentNode.parentNode.id);
        var bitwise = 0;
        var temp = panels.btnCount;
        var ROSbadge = panels.dockedItems.items[0].dockedItems.items[0].items;
 //       var ROSitems = panels.dockedItems.items[1].items;
 //       var ROSbNumber = parseInt(panels.btnCount);
 //           ROSnNumber = isNaN(ROSbNumber) ? 0 : ROSbNumber;


//        console.debug(panels);
            
   	
		var checkbox = Ext.getCmp(this.dom.parentNode.id);
		
		//console.debug('You clicked '+this.id+' and my status is ');
		
		if (checkbox.isChecked()) {
			checkbox.uncheck();
			panels.btnCount--;
		} else {
			checkbox.check();
			panels.btnCount++;
		};
		
		console.debug('Panel updated='+panels.id);
		console.debug('Pressed checkbox!');

        if (panels.btnCount>0) ROSbadge.items[0].setBadge(panels.btnCount)
        else ROSbadge.items[0].setBadge('');

    }

});

